<script lang="ts" setup>
import toLine from '@/utils';
import type { MenuItem } from './interface';

withDefaults(
  defineProps<{
    data: MenuItem[];
    defaultActive?: string;
    router?: boolean;
  }>(),
  {
    defaultActive: '',
    router: false,
  },
);
</script>

<template>
  <el-menu :default-active="defaultActive" :router="router" v-bind="$attrs">
    <template v-for="(item, index) in data" :key="index">
      <el-menu-item v-if="!item.children || !item.children.length" :index="item.index">
        <component :is="`el-icon-${toLine(item.icon as string)}`" v-if="item.icon"></component>
        <span>{{ item.name }}</span>
      </el-menu-item>
      <el-sub-menu v-if="item.children && item.children.length" :index="item.index">
        <template #title>
          <component :is="`el-icon-${toLine(item.icon as string)}`" v-if="item.icon"></component>
          <span>{{ item.name }}</span>
        </template>
        <el-menu-item v-for="(subItem, subIndex) in item.children" :key="subIndex" :index="subItem.index">
          <component :is="`el-icon-${toLine(subItem.icon as string)}`" v-if="subItem.icon"></component>
          <span>{{ subItem.name }}</span>
        </el-menu-item>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<style lang="scss" scoped></style>
